<template>
    <view class="content p-bot300" :style="{ '--color': color }">
        <status-bar :title="title" :back="back"></status-bar>
        <block v-if="delivery_type == 0">
            <view class="viewbox auto bor_radius_10 unreceipt_addr choose_wxaddr m-top20" v-if="!addDetail.Aaddress" @click="toUrl(`/orderPage/Addresslist/Addresslist`)">
                <text class="unreceipt_addr_text">添加收货地址</text>
            </view>
            <orderAddress v-else :addDetail="addDetail" :edit_address="edit_address" @package1="packages = 1" @package2="packages = 2" @addr_pop_isshow="addr_pop_isshow = true"></orderAddress>
        </block>

        <view class="viewbox auto m-top20">
            <Store :pageData="deposit" @storeItem="currentStore" :edit_store="edit_store" :shop_id="shop_id" showType="1"></Store>
        </view>

        <DeliveryTime @getDeliveryTime="getDeliveryTime" ref="deliveryTime"></DeliveryTime>

        <block v-for="(item, index) in pageData" :key="item.id">
            <view class="viewbox auto m-top20 bgwhite padding20 d-flex bor_radius_10">
                <view class="product_Img f-shrink-0 p-re">
                    <image :src="$imgUrls(item.pdtimg)" mode="aspectFill" class="bor_radius_10"></image>
                    <view class="h7 white numId p-top4 p-bot4 p-left14 p-right14">{{ item.id }}</view>
                </view>
                <view class="d-flex f-column m-left30 j-sb">
                    <text class="color_33 size30 ellipsis">{{ item.pdtname }}</text>
                    <view class="d-flex" v-if="item.pdt_spec">
                        <text class="color_99 h6 f-shrink-0">规格：</text>
                        <text class="color_33 h6 m-left10 ellipsis">{{ item.pdt_spec }}</text>
                    </view>
                    <view class="d-flex">
                        <text class="color_99 h6">数量：</text>
                        <text class="color_33 h6 m-left10">X{{ item.pdt_num }}</text>
                    </view>
                </view>
            </view>

            <!--  选择包装 -->
            <view class="viewbox auto bgwhite bor_radius_10 p-top30 p-bot30 p-left20 d-flex j-sb a-center" v-if="item.packings">
                <text class="color_20 size30">选择包装</text>
                <view class="d-flex a-center m-right50">
                    <block v-for="(itm, inx) in item.packings" :key="inx">
                        <view class="d-flex a-center m-left40 m-right40" @click="packagesBtn(item.packages, itm, index)">
                            <view class="Package d-flex a-center j-centert" :class="{ packActive: item.packages == itm }">
                                <view class="iconfont icon-xuanzhong h6"></view>
                            </view>
                            <text class="h6 color_33 m-left16">{{ itm }}</text>
                        </view>
                    </block>
                </view>
            </view>
        </block>
        <!-- 	<chickOrder :pageData="pageData"></chickOrder> -->

        <view class="viewbox auto bgwhite bor_radius_10 m-top20">
            <view class="list bot" v-if="allrefund_num > 0">
                <text class="color_33 size28">退桶数</text>
                <view class="refund">
                    <view class="iconfont icon-jianshao2 size50 refundIcon" :class="refund_num > 0 ? 'color_33' : 'color_cc'" @click="subBarrel"></view>
                    <text class="refund_num">{{ refund_num }}</text>
                    <view class="iconfont icon-zengjia1 size50 refundIcon" :class="refund_num < allrefund_num ? 'color_33' : 'color_cc'" @click="addBarrel"></view>
                </view>
            </view>
            <view class="list bot p-right20" v-if="Deposits == 1">
                <text class="color_33 size28">桶押金</text>
                <view class="money color_ff2">
                    <text class="size26">￥</text>
                    <text class="size36">{{ deposit.deposit_money }}</text>
                </view>
            </view>
            <view class="list bot p-right20" v-if="deposit.delivery_fee">
                <view class="d-flex a-center">
                    <text class="color_33 size28">运费</text>
                    <text class="h6 color_99 m-left10" v-if="shopInfo">基础:{{ shopInfo.express_price }}+超距:{{ shopInfo.extra_express_price }}</text>
                </view>

                <view class="money color_ff2">
                    <text class="size26">￥</text>
                    <text class="size36">{{ deposit.delivery_fee }}</text>
                </view>
            </view>

            <view class="list p-right20">
                <text class="color_33 size28">备注</text>
                <input type="text" v-model="Remark" class="flex-1 size26 text-right p-left10" placeholder="建议留言前先与商家沟通确认额~" />
            </view>
        </view>

        <view class="viewbox auto bgwhite bor_radius_10 m-top20" v-if="deposit.payment">
            <view class="list bot p-right20">
                <text class="color_ff2 size32 bold">总价</text>
                <view class="money color_ff2">
                    <text class="size26">￥</text>
                    <text class="size36">{{ deposit.payment }}</text>
                </view>
            </view>
        </view>

        <!--  配送须知 -->
        <!-- 	<deliveryNotice :instructions=""></deliveryNotice> -->
        <view class="viewbox auto m-top20">
            <view class="color_33 h6 bold">配送须知：</view>
            <view class="rows f-column m-top20">
                <rich-text :nodes="instructions"></rich-text>
            </view>
        </view>

        <view class="viewbox auto d-flex j-sa fixedBtn">
            <view class="bot_btn d-flex cancel j-centert a-center size36 color_80" @click="$common.back(1)">没想好</view>
            <view class="bot_btn d-flex bgcolor j-centert a-center size36 bold white" @click="Sure_Btn()">确定</view>
        </view>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    import chickOrder from '../warehouse/components/chickOrder.vue';
    import orderAddress from '../warehouse/components/orderAddress.vue';
    import deliveryNotice from '../warehouse/components/deliveryNotice.vue';
    import Store from '@/components/details/Store.vue';
    import DeliveryTime from '../warehouse/components/DeliveryTime';
    export default {
        components: {
            chickOrder,
            orderAddress,
            deliveryNotice,
            Store,
            DeliveryTime
        },
        data() {
            return {
                edit_address: 0,
                edit_store: 0,
                title: '快递到家',
                imgUrl: this.imgUrl,

                navHeight: getApp().globalData.navHeight,

                packages: 1, // 包装方式 1、生鲜鸡 2、礼品盒
                Remark: '', // 备注

                addDetail: {},
                addList: [], // 收货地址列表
                addr_pop_isshow: false,
                ids: '',
                id: [],
                keycode: [],
                pageData: [],
                instructions: '', // 配送须知
                refund_num: 0,
                Deposits: 0,
                allrefund_num: 0,
                deposit: '', // 押金信息
                Flag: true,
                delivery_type: 0, // 0 线上 1 线下
                shop_id: '',
                shopInfo: null,
                subscribe_date: ''
            };
        },
        onLoad(e) {
            let that = this;
            if (e.shop_id) that.shop_id = e.shop_id;
            if (e.ids) that.ids = e.ids;
            if (e.delivery_type) {
                that.delivery_type = e.delivery_type;
                that.title = '支付';
            }
            console.log(that.ids);
        },
        onShow() {
            let that = this;

            if (that.delivery_type == 0) {
                that.getAddress();
                that.getOldAddress();
            }
            that.getGiveGoodsInfo();
        },

        methods: {
            getDeliveryTime(e) {
                this.subscribe_date = e;
                console.log(e, 'e');
            },
            packagesBtn(type, typeson, index) {
                let that = this;
                that.$set(that.pageData[index], 'packages', typeson);
            },
            getGiveGoodsInfo() {
                let that = this;
                that.$http
                    .post({
                        url: '/singleSaleWarehouseApi/getGiveGoodsInfo',
                        data: {
                            ids: that.ids
                        }
                    })
                    .then((res) => {
                        if (res.errcode != '100') return that.Toast(res.msg);
                        const result = res.data || [];
                        that.instructions = res.instructions;
                        that.refund_num = res.refund_num;
                        that.allrefund_num = res.refund_num;
                        that.Deposits = res.deposit;
                        this.edit_address = res.edit_address;
                        this.edit_store = res.edit_store;
                        res.edit_address == 1 ? that.getOldAddress() : (this.addDetail = res.orderInfo);
                        this.shop_id = res.orderInfo.store_id;
                        result.forEach((item, index) => {
                            if (item.packing) {
                                let packing = item.packing.split(',');
                                that.$set(item, 'packings', packing);
                                that.$set(item, 'packages', item.packings[0]);
                            }
                            that.keycode.push(item.keycode);
                            that.id.push(item.id);
                        });
                        that.getDepositPayFee();
                        that.pageData = result;
                    });
            },
            getDepositPayFee() {
                if (!this.Flag) return;
                this.Flag = false;
                this.$http
                    .post({
                        url: '/WaterApi/getDepositPayFee',
                        data: {
                            checkid: this.ids,
                            refund_num: this.refund_num,
                            delivery_type: this.delivery_type,
                            delivery_store_id: this.shop_id,
                            shop_id: this.shop_id,
                            address_id: this.addDetail.address_id
                        }
                    })
                    .then((res) => {
                        this.Flag = true;
                        if (res.code != 200) return this.$Toast(res.msg);
                        const result = res.data;
                        if (result.shopInfo) this.shopInfo = result.shopInfo;

                        this.deposit = result;
                    });
            },
            currentStore(e) {
                if (this.shop_id == e.shop_id) return;
                this.shop_id = e.shop_id;
                this.getDepositPayFee();
            },
            subBarrel() {
                if (this.refund_num > 0) {
                    this.refund_num--;
                    this.getDepositPayFee();
                    return;
                }
            },
            addBarrel() {
                if (this.refund_num < this.allrefund_num) {
                    this.refund_num++;
                    this.getDepositPayFee();
                    return;
                }
            },
            Sure_Btn() {
                if (!this.addDetail.Aaddress && this.delivery_type == 0) return this.$Toast('请添加收货地址！');
                if (!this.subscribe_date) return (this.$refs.deliveryTime.show = true);
                // if (!this.subscribe_date) return this.$Toast('请选择送达时间');
                this.$showLoading('');
                this.$http
                    .post({
                        url: '/WaterApi/getDepositPay',
                        data: {
                            checkid: this.ids,
                            refund_num: this.refund_num,
                            name: this.addDetail.Aname ? this.addDetail.Aname : '',
                            phone: this.addDetail.Amobile ? this.addDetail.Amobile : '',
                            address: this.addDetail.Aregion + this.addDetail.Aaddress + this.addDetail.room_number,
                            remarks: this.Remark,
                            delivery_type: this.delivery_type,
                            shop_id: this.shop_id,
                            delivery_store_id: this.shop_id,
                            address_id: this.addDetail.address_id,
                            subscribe_date: this.subscribe_date,
                            router: `/warehouse/homeDelivery`
                        }
                    })
                    .then((res) => {
                        this.$hideLoading();
                        if (res.code != '100') return this.$Toast(res.msg);
                        const result = res.data;
                        if (!result) {
                            this.$Toast(res.msg);
                            this.$back(2);
                            return;
                        }
                        if (result.extraData) {
                            wx.openEmbeddedMiniProgram({
                                appId: result.appId,
                                extraData: result.extraData
                            });
                        } else {
                            this.$pop.getPayment(result).then((pay) => {
                                this.$back(2);
                            });
                        }
                    });
            },

            getOldAddress() {
                let that = this;
                that.$http
                    .get({
                        url: '/SRA_simMallApi/getOldAddress',
                        data: {
                            type: 3
                        }
                    })
                    .then((res) => {
                        if (res.code == '100' && res.data) that.addDetail = res.data;
                    });
            },
            //  获取我的地址
            getAddress() {
                let that = this;
                that.$http
                    .get({
                        url: '/zzj_singleSaleApi/getAddress'
                    })
                    .then((res) => {
                        if (res.code == '100' && res.data) {
                            that.addList = res.data;
                        }
                    });
            },
            addAddress(editId) {
                let that = this;
                let param = '';
                if (editId) param += '&editId=' + editId;
                if (that.goods_id) param += '&goods_id=' + that.goods_id;
                if (that.goods_num) param += '&goods_num=' + that.goods_num;
                if (that.car_id) param += '&car_id=' + that.car_id;
                if (that.group_id) param += '&group_id=' + that.group_id;
                if (that.open_group) param += '&open_group=' + that.open_group;
                if (that.specs) param = param + '&specs_bind_id=' + that.specs.specs_bind_id + '&specs_bind_text=' + that.specs.specs_bind_text;
                console.log(param);
                uni.navigateTo({
                    url: '/orderPage/order/addAddress?page_type=3' + param
                });
            },
            chooseAdd(id) {
                // 选择收货地址
                let that = this;
                that.addr_pop_isshow = false;
                that.getCurrAdd(id);
            },
            getCurrAdd(id) {
                //获取选择的地址
                let that = this;
                that.$http
                    .get({
                        url: '/zzj_singleSaleApi/obtainAddress',
                        data: {
                            id: id
                        }
                    })
                    .then((res) => {
                        if (res.code == 100 && res.data) {
                            that.Aregion = res.data.Aregion;
                            that.addDetail = res.data;
                        }
                    });
            }
        },
        computed: {
            ...mapState(['color', 'vid', 'bid'])
            // currentShop_id() {
            // 	return this.selectedShopId || (this.shops && this.shops.length > 0 ? this.shops[0].shop_id : null);
            // },
            // storeItem() {
            // 	if (!this.shops || !this.currentShop_id) return null;
            // 	const result = this.shops.find(n => n.shop_id == this.currentShop_id);
            // 	return result;
            // }
        }
    };
</script>

<style lang="scss">
    page {
        background: #f7f9fa;
    }

    .maskBg {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        background: #ffffff;
    }

    .emptyPage {
        background: #ffffff;
    }

    .fixedBtn {
        position: fixed;
        bottom: 100rpx;
        left: 50%;
        transform: translate(-50%, 0);
        z-index: 1000;
    }

    .bot_btn {
        width: 310rpx;
        height: 100rpx;
        border-radius: 50rpx;
        -webkit-border-radius: 50rpx;
    }

    .cancel {
        background: #f1f1f1;
    }

    .addr_pop_ftr {
        width: 100%;
        padding: 30upx 0;
        background: #ffffff;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 1;
        padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
        padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
    }

    .addr_list {
        overflow-x: hidden;
        background: #ffffff;
        -webkit-overflow-scrolling: touch;

        .addr_item {
            height: 157upx;
            border-bottom: 1px solid #dddddd;
            padding: 0 30upx;
            position: relative;

            .addr_info_c {
                overflow: hidden;
                text-overflow: ellipsis;
                color: #666666;
            }

            .addr_info_h {
                overflow: hidden;
                text-overflow: ellipsis;
                margin-bottom: 15upx;
                font-size: 36upx;
                font-family: arial;
            }
        }
    }

    .product_Img {
        width: 140rpx;
        height: 140rpx;
    }

    .numId {
        position: absolute;
        right: 0;
        top: 0;
        background: var(--color);
        border-radius: 0 10rpx 0 10rpx;
    }

    .Package {
        width: 30rpx;
        height: 30rpx;
        border: 1rpx solid #cccccc;
        border-radius: 50%;
        -webkit-border-radius: 50%;
    }

    .packActive {
        border: 1rpx solid var(--color) !important;
        background: var(--color) !important;
    }

    .list {
        width: 100%;
        height: 92rpx;
        padding-left: 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .refund {
        height: 100%;
        display: flex;
        align-items: center;
    }

    .refundIcon {
        padding: 14rpx;
    }

    .refund_num {
        width: 62rpx;
        font-weight: bold;
        color: #000;
        font-size: 28rpx;
        text-align: center;
    }

    .money {
        display: flex;
        align-items: center;
    }

    .List {
        width: 690rpx;
        margin: 20rpx auto;
        background-color: #fff;
        padding: 20rpx 10rpx;
        display: flex;
        align-items: center;
        border-radius: 10rpx;
    }

    .logoBox,
    .logo {
        width: 80rpx;
        height: 80rpx;
        border-radius: 6rpx;
    }
</style>
